import { addTioContextListener, TioContext } from "@/comps/ctx/TioContext";
import { gl_opt } from '@/util/http';
import { Form } from '@arco-design/web-react';
import { createEditor } from '@textbus/editor';
import '@textbus/editor/bundles/textbus.min.css';
import $ from "cash-dom";
import React, { useContext, useEffect } from "react";

import { log, info, warn, error } from "@/util/tio"

import { useDispatch, useSelector } from "react-redux";
import { selectRoot, update } from "@/store/rootSlice";


const FormItem = Form.Item;

function TextbusDemo() {
    const root = useSelector(selectRoot);

    let editor
    useEffect(() => {
        editor = createEditor('#editor', {
            theme: root.theme // == 'dark' ? 'mac-os-dark' : 'mac-os'   //// 可选 'dark' | 'mac-os' | 'mac-os-dark'，不传即为默认样式
        })
        log(editor)

        editor.onChange.subscribe(() => {
            log(editor.docContainer)
        })

        $('.textbus-container').css({ "height": "100%" })
    }, []);


    useEffect(() => {
        if (root.theme == 'dark') {
            $('.textbus-container').addClass('textbus-theme-dark');
        } else {
            $('.textbus-container').removeClass('textbus-theme-dark');
        }

    }, [root]);


    const [form] = Form.useForm();
    return (
        <>
            <div id="editor" className={" h-[calc(100%-5rem)]"}>
                
            </div>
        </>
    );
}
export default TextbusDemo;
